<template>
  <view :data-theme="theme">
    <BasicComponents></BasicComponents>
    <CustomNavbar title="任务列表" :left-icon="false" />

    <uni-swipe-action ref="swipeAction">
      <uni-swipe-action-item
        v-for="(item, index) in swipeList"
        :right-options="item.options"
        :key="item.id"
        @click="swipeClick($event, index)"
      >
        <view class="content-box">
          <text class="content-text">{{ item.tname }}</text>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <BottomButton :is-right-btn="false"></BottomButton>
  </view>
</template>
<script setup lang="ts">
import dayjs from "dayjs";

const theme = useThemeStore().theme;
const globalStore = useGlobalStore();

onLoad(() => {
  init();
});

let swipeList = ref<any>([]);

const swipeClick = async (e, index) => {
  const { content } = e;
  const { id, detailId } = swipeList.value[index];

  if (content.text === "开始") {
    const params = {
      tid: id,
      date: dayjs().format("YYYY-MM-DD"),
      startTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
    };
    await taskDetailAdd(params);
  } else {
    let params = {
      tid: id,
      id: detailId,
      endTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
    };
    await taskDetailUpdate(params);
  }
  init();
  globalStore.setMessage("操作成功");
};

const init = async () => {
  const data: any = await taskFindByDate();
  swipeList.value = [];
  for (let i = 0; i < data.length; i++) {
    const { type, endTime, startTime } = data[i] || {};

    if (!endTime || !startTime) {
      const obj = setNewObjValue(data[i], "id,tname,type,endTime,startTime,detailId");
      swipeList.value.push({
        ...obj,
        options: []
      });

      if (type === 1 && !startTime) {
        swipeList.value[swipeList.value.length - 1].options.push({
          text: "开始",
          style: {
            backgroundColor: "#5ac725"
          }
        });
      } else {
        swipeList.value[swipeList.value.length - 1].options.push({
          text: "结束",
          style: {
            backgroundColor: "#fa3534"
          }
        });
      }
    }
  }
  console.log(swipeList.value, "swipeList.value");
};
</script>
<style src="./index.scss"></style>
